<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入 react 和 react-dom -->
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>

<body>
    <!-- 根元素：所有代码挂载的区域 -->
    <div id="root">
        <!-- <h1 class="title">React 基础</h1> -->
    </div>



    <script>
        // 2.创建 react元素
        // 第一个参数：标签名
        // 第二个参数：属性
        // 第三个参数：标签内容
        // let h1 = React.createElement("h1", {
        //     className: "title",id:"qwe"
        // }, React.createElement('span',null,'哈哈哈'));

        // JSX: JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码

        // let h1=<h1>React 基础</h1>

        // 3.渲染React到页面中
        // 第一个参数：react元素
        // 第二个参数：挂载的区域
        ReactDOM.render(h1, document.getElementById("root"))


        // 使用脚手架搭建react项目： npx create-react-app 项目名称
   
    </script>
</body>

</html>